<template>
  <div class="map-grid-container">
    <div ref="chartRef" class="chart-container"></div>

    <!-- 完全自定义的信息面板布局（保留，仅用于显示默认区域基础信息） -->
    <div ref="infoPanel" class="custom-info-panel" v-if="showInfoPanel">
      <div class="panel-header">
        <h3 ref="panelTitle"></h3>
        <div class="panel-color-indicator" ref="colorIndicator"></div>
      </div>
      <div class="panel-content">
        <div class="info-row">
          <span class="info-label">经度范围:</span>
          <span class="info-value" ref="lonRange"></span>
        </div>
        <div class="info-row">
          <span class="info-label">纬度范围:</span>
          <span class="info-value" ref="latRange"></span>
        </div>
        <div class="info-row">
          <span class="info-label">透明度:</span>
          <span class="info-value" ref="opacityValue"></span>
        </div>
      </div>
      <div class="panel-footer">
        <small>鼠标移开区域可关闭此面板</small>
      </div>
    </div>

    <!-- 移除整个controls控制面板 -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
import * as echarts from "echarts";
import chinaJson from "@/assets/china.json"; // 导入中国地图JSON数据

// 组件状态：移除区域选择相关状态（selectedRegions），保留核心状态
const chartRef = ref(null);
const chart = ref(null);

// 自定义信息面板相关状态和引用（保留，用于默认区域）
const showInfoPanel = ref(false);
const infoPanel = ref(null);
const panelTitle = ref(null);
const colorIndicator = ref(null);
const lonRange = ref(null);
const latRange = ref(null);
const opacityValue = ref(null);

// 固定区域配置：移除动态选择，改为默认显示北京、重庆（原默认选中项）
const defaultRegions = {
  beijing: {
    name: "北京市",
    minLon: 115.42,
    maxLon: 117.5,
    minLat: 39.44,
    maxLat: 41.05,
    color: "#ffff00",
    opacity: 0.5,
  },
  chongqing: {
    name: "重庆市",
    minLon: 105.1,
    maxLon: 110.2,
    minLat: 28.1,
    maxLat: 32.2,
    color: "#ff00ff",
    opacity: 0.5,
  },
};
// 默认区域名称（原用于controls信息展示，虽面板移除但保留变量，避免代码报错）
// const defaultRegionNames = Object.values(defaultRegions).map(
//   (region) => region.name
// );

// 网格配置：保留基础配置（因controls移除，网格参数改为固定值，不再动态调整）
const centerLon = ref(105); // 固定中心点经度（原controls默认值）
const centerLat = ref(35); // 固定中心点纬度（原controls默认值）
const gridSize = ref(2); // 固定网格大小（原controls默认值）
const visibleRange = ref(30); // 固定可见范围（原controls默认值）
// const baseGridCount = 50; // 固定网格数量

// 计算当前实际显示的网格数量（无变化）
// const currentGridCount = computed(() => {
//   const halfRange = visibleRange.value;
//   const minLon = centerLon.value - halfRange;
//   const maxLon = centerLon.value + halfRange;
//   const minLat = centerLat.value - halfRange;
//   const maxLat = centerLat.value + halfRange;

//   // 按可见范围和网格大小动态计算
//   const lonCount = Math.ceil((maxLon - minLon) / gridSize.value);
//   console.log(lonCount, "lonCount----");
//   const latCount = Math.ceil((maxLat - minLat) / gridSize.value);

//   console.log(latCount, "latCount----");
//   return Math.max(lonCount, latCount); // 取较大值确保网格均匀
// });

// 线宽计算（固定线宽为1px，无变化）
const lineWidth = computed(() => 1);

// 定位自定义信息面板（保留，用于默认区域）
const positionInfoPanel = (event) => {
  if (!infoPanel.value || !chartRef.value) return;

  const panelEl = infoPanel.value;
  const chartRect = chartRef.value.getBoundingClientRect();

  // 计算位置，避免面板超出图表视口
  let left = event.offsetX + 10;
  let top = event.offsetY + 10;

  // 检查右侧边界
  if (left + panelEl.offsetWidth > chartRect.width) {
    left = event.offsetX - panelEl.offsetWidth - 10;
  }

  // 检查底部边界
  if (top + panelEl.offsetHeight > chartRect.height) {
    top = event.offsetY - panelEl.offsetHeight - 10;
  }

  // 应用位置
  panelEl.style.left = `${left}px`;
  panelEl.style.top = `${top}px`;
};

const gridLines = ref([]);
const isChartReady = ref(false);

// 初始化ECharts实例：移除区域选择相关逻辑，保留核心初始化
onMounted(() => {
  nextTick(() => {
    if (chartRef.value) {
      chart.value = echarts.init(chartRef.value);
      echarts.registerMap("china", chinaJson);
      isChartReady.value = true;

      // 初始化图表和事件监听
      initChart();
      initEventListeners();

      // 绘制网格和默认区域（固定显示北京、重庆）
      drawGrid();
      nextTick(() => drawRegionFill());
    }
  });
});

// 初始化事件监听：仅处理默认区域的信息面板显示（无变化）
const initEventListeners = () => {
  if (!isChartReady.value) return;

  // 鼠标移入默认区域时显示信息面板
  chart.value.on("mouseover", (params) => {
    if (params.seriesName && params.seriesName.startsWith("regionFill_")) {
      showInfoPanel.value = true;

      // 获取默认区域信息（从defaultRegions中匹配）
      const regionKey = params.seriesName.replace("regionFill_", "");
      const region = defaultRegions[regionKey];
      if (!region) return; // 非默认区域不处理

      // 设置信息面板内容
      if (panelTitle.value) panelTitle.value.textContent = region.name;
      if (colorIndicator.value) {
        colorIndicator.value.style.backgroundColor = region.color;
        colorIndicator.value.style.opacity = region.opacity;
      }
      if (lonRange.value) {
        lonRange.value.textContent = `${region.minLon.toFixed(
          1
        )}°E - ${region.maxLon.toFixed(1)}°E`;
      }
      if (latRange.value) {
        latRange.value.textContent = `${region.minLat.toFixed(
          1
        )}°N - ${region.maxLat.toFixed(1)}°N`;
      }
      if (opacityValue.value) {
        opacityValue.value.textContent = region.opacity;
      }

      // 定位信息面板
      positionInfoPanel(params.event);
    }
  });

  // 鼠标移出区域时隐藏信息面板
  chart.value.on("mouseout", (params) => {
    if (params.seriesName && params.seriesName.startsWith("regionFill_")) {
      showInfoPanel.value = false;
    }
  });

  // 鼠标在区域上移动时更新面板位置
  chart.value.on("mousemove", (params) => {
    if (showInfoPanel.value && params.seriesName?.startsWith("regionFill_")) {
      positionInfoPanel(params.event);
    }
  });

  // 窗口大小变化时重新定位
  window.addEventListener("resize", () => {
    if (showInfoPanel.value) showInfoPanel.value = false;
    if (isChartReady.value) chart.value.resize();
  });
};

// 初始化图表配置（无变化）
const initChart = () => {
  if (!isChartReady.value) return;

  const option = {
    backgroundColor: "#f0f4f7",
    tooltip: { show: false }, // 禁用默认tooltip
    // 地理坐标系：固定显示地图
    geo: {
      map: "china",
      show: true,
      roam: true,
      center: [centerLon.value, centerLat.value],
      zoom: 1.0,
      label: { show: false },
      itemStyle: {
        areaColor: "#e6f7ff",
        borderColor: "#91cc75",
        borderWidth: 1,
      },
      emphasis: {
        itemStyle: { areaColor: "#b3d9ff" },
        label: { show: true, color: "#000" },
      }, // 可选：使用“等距圆柱投影”，减少经度拉伸（比墨卡托更接近实际）
      projection: "equirectangular",
    },
    series: [
      // 地图系列：固定显示
      {
        type: "map",
        map: "china",
        show: true,
        geoIndex: 0,
        label: { show: false },
      },
    ],
  };

  chart.value.setOption(option);
};

// 处理窗口大小变化（无变化）
const handleResize = () => {
  if (isChartReady.value) chart.value.resize();
};

// 生成网格线数据（无变化）
const generateGridData = () => {
  const lines = [];
  const halfRange = visibleRange.value;

  // 1. 计算可见范围（不变）
  const minLon = centerLon.value - halfRange; // 75°E
  const maxLon = centerLon.value + halfRange; // 135°E
  const minLat = centerLat.value - halfRange; // 5°N
  const maxLat = centerLat.value + halfRange; // 65°N

  // 2. 计算网格线数量（不变，但确保步长严格为gridSize）
  const lonLinesCount = Math.ceil((maxLon - minLon) / gridSize.value); // 60/2=30条
  const latLinesCount = Math.ceil((maxLat - minLat) / gridSize.value); // 60/2=30条

  // -------------------------- 修复：纬线（水平线）步长计算 --------------------------
  // 原逻辑：比例分配（可能有精度误差）
  // const lat = minLat + (maxLat - minLat) * (i / latLinesCount);
  // 新逻辑：固定步长累加（严格2度）
  for (let i = 0; i <= latLinesCount; i++) {
    const lat = minLat + i * 1.6; // 5°N + i*2°（如5、7、9...65°N）
    // const lat = minLat + i * gridSize.value
    // 避免超出最大纬度（防止浮点数误差导致的越界）
    if (lat > maxLat) break;

    lines.push({
      type: "lines",
      name: `纬线${i}`,
      coordinateSystem: "geo",
      polyline: true,
      lineStyle: {
        width: lineWidth.value,
        color: i % 10 === 0 ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 0, 0, 0.3)",
        type: i % 10 === 0 ? "solid" : "dashed",
      },
      data: [
        [
          [minLon, lat],
          [maxLon, lat],
        ],
      ],
    });
  }

  // -------------------------- 修复：经线（垂直线）步长计算 --------------------------
  // 原逻辑：比例分配（可能有精度误差）
  // const lon = minLon + (maxLon - minLon) * (i / lonLinesCount);
  // 新逻辑：固定步长累加（严格2度）
  for (let i = 0; i <= lonLinesCount; i++) {
    const lon = minLon + i * gridSize.value; // 75°E + i*2°（如75、77、79...135°E）
    // 避免超出最大经度（防止浮点数误差导致的越界）
    if (lon > maxLon) break;

    lines.push({
      type: "lines",
      name: `经线${i}`,
      coordinateSystem: "geo",
      polyline: true,
      lineStyle: {
        width: lineWidth.value,
        color: i % 10 === 0 ? "rgba(0, 0, 255, 0.7)" : "rgba(0, 0, 255, 0.3)",
        type: i % 10 === 0 ? "solid" : "dashed",
      },
      data: [
        [
          [lon, minLat],
          [lon, maxLat],
        ],
      ],
    });
  }

  return lines;
};

// 生成单个默认区域填充数据（从defaultRegions读取配置，无变化）
const generateSingleRegionFillData = (regionKey, region) => {
  const coordinates = [
    [region.minLon, region.minLat],
    [region.maxLon, region.minLat],
    [region.maxLon, region.maxLat],
    [region.minLon, region.maxLat],
    [region.minLon, region.minLat], // 闭合多边形
  ];

  return {
    type: "custom",
    name: `regionFill_${regionKey}`,
    coordinateSystem: "geo",
    renderItem: (params, api) => {
      const points = coordinates.map((coord) => api.coord(coord));
      return {
        type: "polygon",
        shape: { points },
        style: {
          fill: region.color,
          opacity: region.opacity,
          stroke: region.color,
          lineWidth: 2,
        },
        emphasis: {
          style: { opacity: Math.min(region.opacity + 0.2, 1) },
        },
      };
    },
    data: [
      {
        name: region.name,
        value: [
          (region.minLon + region.maxLon) / 2,
          (region.minLat + region.maxLat) / 2,
        ],
        ...region,
      },
    ],
  };
};

// 生成默认区域填充数据（固定显示北京、重庆，无变化）
const generateRegionFillData = () => {
  return Object.entries(defaultRegions).map(([key, region]) =>
    generateSingleRegionFillData(key, region)
  );
};

// 绘制网格（无变化）
const drawGrid = () => {
  if (!isChartReady.value) return;
  gridLines.value = generateGridData();

  const option = chart.value.getOption();
  // 过滤非网格系列（仅保留地图和区域填充）
  const nonGridSeries = option.series.filter(
    (series) =>
      series.type === "map" ||
      (series.name && series.name.startsWith("regionFill_"))
  );
  // 网格固定显示，添加网格系列
  option.series = [...nonGridSeries, ...gridLines.value];
  // 更新地图中心点
  option.geo.center = [centerLon.value, centerLat.value];
  const mapSeries = option.series.find((s) => s.type === "map");
  if (mapSeries) mapSeries.show = true;

  chart.value.setOption(option, true);
};

// 绘制区域填充（固定显示默认区域，无变化）
const drawRegionFill = () => {
  if (!isChartReady.value) return;

  const option = chart.value.getOption();
  // 过滤原有区域填充系列
  option.series = option.series.filter(
    (series) => !series.name?.startsWith("regionFill_")
  );
  // 固定添加默认区域填充
  const regionFillSeries = generateRegionFillData();
  option.series = [...option.series, ...regionFillSeries];

  chart.value.setOption(option, false);
};

// 移除controls后，网格更新方法不再被调用，保留方法避免代码报错（可注释但不删除）
// const updateGrid = () => {
//   if (!isChartReady.value) return;
//   nextTick(() => {
//     drawGrid();
//     drawRegionFill(); // 网格更新时同步更新区域位置
//   });
// };

// 监听容器大小变化（无变化）
watch(
  () => chartRef.value?.clientWidth,
  () => {
    if (isChartReady.value) chart.value.resize();
  }
);

// 组件卸载时清理（无变化）
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  if (chart.value) {
    chart.value.off("mouseover");
    chart.value.off("mouseout");
    chart.value.off("mousemove");
    chart.value.dispose();
  }
});
</script>

<style scoped>
.map-grid-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 自定义信息面板样式（保留，用于默认区域） */
.custom-info-panel {
  position: absolute;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  pointer-events: none;
  width: 240px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  transform: translateY(5px);
  opacity: 0;
  animation: panelFadeIn 0.2s forwards;
}

@keyframes panelFadeIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.panel-header {
  background: #f8f9fa;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.panel-color-indicator {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.panel-content {
  padding: 12px 15px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  flex-grow: 1;
}

.panel-footer {
  background: #f8f9fa;
  padding: 8px 15px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}

/* 移除controls相关样式（因面板已删除，避免冗余） */
.controls,
.control-btn,
.control-btn.small-btn,
.region-selector,
.custom-region-settings,
.grid-settings,
.info {
  display: none !important;
}
</style>
